<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
  <link rel="stylesheet" type="text/css" href="css/login&register.css">
  <link rel="stylesheet" type="text/css" href="css/register.css">
  <script src="js/jquery-3.6.2.min.js"></script>
</head>
<body>
<div th:replace="common/top"></div>


<div class="w">
  <div class="user-content">
    <div class="user-title">
      ${sessionScope.isLogin=="true" ? "注册" : "注册"}
    </div>
    <form action="register" class="user-form" method="POST">
      <c:if test="${requestScope.registerMsg != null}">
        <div class="user-form-error">
          <i class="fa-solid fa-circle-exclamation error-icon" ></i>
          <p class="error-msg">${requestScope.registerMsg}</p>
        </div>
      </c:if>
      <div class="column1" >
        <div class="user-form-item">
          <label for="username" class="user-form-label">
            <i class="fa-solid fa-user"></i>
          </label>
          <input type="text" class="user-form-input" name="username" id="username" placeholder="Please enter your username" autocomplete="off">
        </div>
        <div class="user-form-item">
          <label for="password" class="user-form-label">
            <i class="fa-solid fa-lock"></i>
          </label>
          <input type="password" class="user-form-input" name="password" id="password" placeholder="Please enter your password" autocomplete="off">
        </div>
        <div class="user-form-item">
          <label for="repeatPassword" class="user-form-label">
            <i class="fa-solid fa-lock"></i>
          </label>
          <input type="password" class="user-form-input" name="repeatPassword" id="repeatPassword" placeholder="Please enter your password again" autocomplete="off">
        </div>
        <div class="user-form-item">
          <label for="email" class="user-form-label">
            <i class="fa-solid fa-envelope"></i>
          </label>
          <input type="text" class="user-form-input" name="email" id="email" placeholder="Please enter your email" autocomplete="off">
        </div>
        <div class="user-form-item">
          <label for="firstname" class="user-form-label">
            <i class="fa-solid fa-signature"></i>
          </label>
          <input type="text" class="user-form-input" name="firstname" id="firstname" placeholder="Please enter your firstname" autocomplete="off">
        </div>
        <div class="user-form-item">
          <label for="lastname" class="user-form-label">
            <i class="fa-solid fa-signature"></i>
          </label>
          <input type="text" class="user-form-input" name="lastname" id="lastname" placeholder="Please enter your lastname" autocomplete="off">
        </div>
        <div class="user-form-item">
          <label for="listOption">是否要展示购物车：</label>
          <select name="listOption" id="listOption">
            <option value="1">是</option>
            <option value="0">否</option>
          </select>
        </div>
        <div class="user-form-item">
          <label for="vcode1">验证码：</label>
          <input type="text" class="user-form-inputvcode" name="vcode" id="vcode1" placeholder="请输入验证码" autocomplete="off">
          <a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath }/checkcode" title="看不清点击刷新" id="vcode"/></a>
        </div>

      </div>

      <div class="column2" >


        <div class="user-form-item">
          <label for="add1" class="user-form-label">
            <i class="fa-solid fa-location-dot"></i>
          </label>
          <input type="text" class="user-form-input" name="add1" id="add1" placeholder="Please enter your address1" autocomplete="off">
        </div>


        <div class="user-form-item">
          <label for="add2" class="user-form-label">
            <i class="fa-solid fa-location-dot"></i>
          </label>
          <input type="text" class="user-form-input" name="add2" id="add2" placeholder="Please enter your address2" autocomplete="off">
        </div>

        <div class="user-form-item">
          <label for="state" class="user-form-label">
            <i class="fa-solid fa-map-location-dot"></i>
          </label>
          <input type="text" class="user-form-input" name="state" id="state" placeholder="Please enter your state" autocomplete="off">
        </div>

        <div class="user-form-item">
          <label for="phone" class="user-form-label">
            <i class="fa-solid fa-phone"></i>
          </label>
          <input type="text" class="user-form-input" name="phone" id="phone" placeholder="Please enter your phone" autocomplete="off">
        </div>

        <div class="user-form-item">
          <label for="zip" class="user-form-label">
            <i class="fa-solid fa-envelopes-bulk"></i>
          </label>
          <input type="text" class="user-form-input" name="zip" id="zip" placeholder="Please enter your zip" autocomplete="off">
        </div>

        <div class="user-form-item">
          <label for="country" class="user-form-label">
            <i class="fa-solid fa-earth-asia"></i>
          </label>
          <input type="text" class="user-form-input" name="country" id="country" placeholder="Please enter your country" autocomplete="off">
        </div>
        <div class="user-form-item">
          <label for="favouriteCategoryId">最喜爱的动物：</label>
          <select name="favouriteCategoryId" id="favouriteCategoryId">
            <option value="CATS">CATS</option>
            <option value="DOGS">DOGS</option>
            <option value="BIRDS">BIRDS</option>
            <option value="FISH">FISH</option>
            <option value="REPTILES">REPTILES</option>
          </select>
        </div>

        <div class="user-form-item">
          <label for="bannerOption">是否要展示推荐：</label>
          <select name="bannerOption" id="bannerOption">
            <option value="1">是</option>
            <option value="0">否</option>
          </select>
        </div>
        <div class="user-form-item">
          <input type="submit" value="注册" class="user-form-submit">
        </div>
        <div class="user-form-link">
          <a href="signonForm" class="link">去登录>></a>
        </div>


      </div>




    </form>
  </div>

</div>

<div th:replace="common/bottom"></div>
</body>
</html>